<template>
  <div class="screen-preview-page" :style="{ background: themeColor }">
    <el-card class="preview-header-card">
      <div class="preview-header">
        <div>
          <span class="preview-title">{{ screen?.name || '大屏预览' }}</span>
          <el-tag size="small" effect="plain" style="margin-left:12px;">{{ screen?.theme }}</el-tag>
        </div>
        <div>
          <el-button size="small" @click="goBack">返回</el-button>
          <el-button size="small" @click="exportImg">导出为图片</el-button>
        </div>
      </div>
      <el-descriptions :column="3" style="margin-bottom:0;margin-top:6px;" v-if="screen">
        <el-descriptions-item label="分组">{{ screen.group }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ screen.created }}</el-descriptions-item>
        <el-descriptions-item label="组件数">{{ screen.comps?.length || 0 }}</el-descriptions-item>
        <el-descriptions-item label="描述" :span="3">{{ screen.desc || '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <div class="screen-canvas-preview" ref="canvasRef" :style="canvasStyle">
      <div
        v-for="comp in screen?.comps || []"
        :key="comp.id"
        class="canvas-comp"
        :style="getCompStyle(comp)"
      >
        <component :is="comp.type === 'chart' ? 'chart-demo' : comp.type === 'kpi' ? 'kpi-demo' : comp.type === 'text' ? 'text-demo' : 'map-demo'"
          v-bind="comp.props"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import html2canvas from 'html2canvas'

// 引入与 ScreenDesigner.vue 相同的演示组件

const route = useRoute()
const router = useRouter()
const screen = ref(null)
const canvasRef = ref(null)

onMounted(() => {
  const all = JSON.parse(localStorage.getItem('screens') || '[]')
  const current = all.find(s => s.id === Number(route.params.id))
  if (current) {
    screen.value = current
  }
})

// 主题颜色（与设计器一致）
const themeColor = computed(() => {
  if (!screen.value) return '#fff'
  const t = screen.value.theme
  if (t === '深色') return '#181d2c'
  if (t === '科技蓝') return '#0a2a5e'
  if (t === '简约白') return '#fff'
  return '#f7f8fa'
})

const canvasStyle = computed(() => ({
  width: '760px',
  height: '430px',
  margin: '32px auto 0',
  background: 'transparent',
  borderRadius: '14px',
  position: 'relative',
  overflow: 'hidden',
  boxShadow: '0 2px 16px 0 rgba(80,120,200,0.10)'
}))

function getCompStyle(comp) {
  return {
    position: 'absolute',
    left: comp.x + 'px',
    top: comp.y + 'px',
    width: comp.width + 'px',
    height: comp.height + 'px',
    background: comp.type === 'text' ? '#fff' : 'rgba(255,255,255,0.07)',
    border: '2px solid ' + (comp.type === 'text' ? '#ccc' : '#6fa1ff'),
    borderRadius: '8px'
  }
}

function goBack() {
  router.push({ name: 'ScreenList' })
}

// 导出为图片
async function exportImg() {
  if (!canvasRef.value) return
  html2canvas(canvasRef.value, { useCORS: true }).then(canvas => {
    const link = document.createElement('a')
    link.href = canvas.toDataURL('image/png')
    link.download = (screen.value?.name || '大屏') + '.png'
    link.click()
  })
}
</script>


<style scoped>
.screen-preview-page {
  min-height: 100vh;
  padding: 0;
}
.preview-header-card {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 14px;
  margin-top: 28px;
  box-shadow: 0 2px 14px 0 rgba(50,80,180,0.07);
}
.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
}
.preview-title {
  font-size: 22px;
  font-weight: 600;
  color: #1457c6;
}
.screen-canvas-preview {
  position: relative;
  min-width: 760px;
  min-height: 430px;
  margin: 0 auto;
  border-radius: 16px;
  margin-bottom: 64px;
  background: transparent;
}
.canvas-comp {
  position: absolute;
  box-sizing: border-box;
  z-index: 1;
}
</style>
